<template>
  <div class="overflow-x-hidden overflow-y-hidden">
    <el-input v-model="keyword" class="wfull" placeholder="请输入关键字" clearable />
    <div class="h-[calc(100%-30px)] overflow-x-hidden overflow-y-auto">
      <el-tree ref="treeRef"
        :data="data"
        node-key="id"
        :filter-node-method="filterNodeMethod"
        empty-text="无数据"
        default-expand-all
        highlight-current
        :expand-on-click-node="false"
        draggable
      >
        <template #default="{ node, data }">
          <el-dropdown trigger="contextmenu" placement="bottom-start" class="w-[calc(100%-34px)]">
            <div class="flex gap2">
              <span>{{ data.component }}({{ data.id }})</span>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-if="data.id !== 'root'" @click="insertBefore(node)">前面插入</el-dropdown-item>
                <el-dropdown-item v-if="data.id !== 'root'" @click="insertAfter(node)">后面插入</el-dropdown-item>
                <el-dropdown-item v-if="!data.type" @click="append(node)">添加下级</el-dropdown-item>
                <el-dropdown-item divided @click="remove(node)">删除</el-dropdown-item>                      
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
        <template #empty>
          <div class="h180px flex-center">
            <ElButton @click="add">添加</ElButton>
          </div>
        </template>
      </el-tree>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { ElDropdown, ElDropdownMenu, ElDropdownItem, ElInput, ElTree, TreeInstance, ElEmpty, ElButton } from 'element-plus';
  import { genNodeId } from '@/utils/system';

  const props = defineProps<{data: any[]}>()

  const treeRef = ref<TreeInstance>()

  const keyword = ref('')
  const filterNodeMethod = (value: string, data) => {
    if (!value) return true
    return data.label?.includes(value) || data.value?.includes(value)
  }
  watch(keyword, (val) => treeRef.value!.filter(val))


  function add() {
    props.data.push({id: 'root', component: 'div', cls: ['full']})
  }

  function insertBefore(node) {
    treeRef.value.insertBefore({id: genNodeId(), component: 'div'}, node)
  }

  function insertAfter(node) {
    treeRef.value.insertAfter({id: genNodeId(), component: 'div'}, node)
  }

  function append(node) {
    treeRef.value.append({id: genNodeId(), component: 'div'}, node)
  }

  function remove(node) {
    treeRef.value.remove(node)
  }

  function getCurrentArea() {
    return treeRef.value.getCurrentNode()
  }

  function getCurrentNode() {
    return treeRef.value.getNode(treeRef.value.getCurrentNode())
  }

  function setCurrentKey(id: string) {
    treeRef.value.setCurrentKey(id, true)
  }

  defineExpose({ getCurrentArea, getCurrentNode, setCurrentKey })
</script>
<style lang="less" scoped>
  :deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content) {
    background-color: aquamarine;
  }
</style>